<template>
  <div class="report-card">
    <div
      class="report-item"
      :class="{ done: item.status === '已完成' }"
      v-for="item in reportList"
      v-bind:key="item.id"
    >
      <div :class="{ 'report-in': true }">
        <span class="status"
          ><span class="btn">{{ item.status }}</span></span
        >
        <div class="info">
          <span class="title">{{ item.title }}</span>
          <span class="desc">{{ item.desc }}</span>
        </div>
        <div class="contact">
          <span class="contact-text">
            <span class="icon"> account_circle </span>
            {{ item.address }}
          </span>
          <span class="contact-text">
            <span class="icon"> call </span>
            {{ item.user }}
          </span>
          <span class="contact-text">
            <span class="icon"> mail </span>
            {{ item.phone }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, toRefs } from 'vue'

const props = defineProps(['reportList'])
const { reportList = [] } = toRefs(props)
</script>

<style scoped lang="scss">
.report-card {
  width: dpi(70rem);
  // margin: 0 dpi(4rem);
  margin: dpi(4rem) auto;

  .report-item {
    position: relative;
    background-color: #ffffff;
    box-shadow: 0rem dpi(1rem) dpi(2rem) 0rem rgba(0, 0, 0, 0.05);

    &.done {
      opacity: 0.5;
      .report-in {
        width: dpi(70rem);
        margin-bottom: dpi(4rem);

        .info {
          background-color: #f5f5f5;
        }
      }
    }
    &:not(&:last-child) {
      margin-bottom: dpi(6rem);
    }
    .status {
      position: absolute;
      top: 0;
      left: dpi(3rem);
      .btn {
        display: inline-block;
        color: #fff;
        font-size: dpi(2rem);
        padding: dpi(1rem) dpi(2rem);
        background-color: #0571b0;
      }
    }
    .title {
      margin-top: dpi(2rem);
      margin-bottom: dpi(4rem);
      font-family: PingFangSC-Semibold;
      font-size: dpi(3rem);
      color: #05204d;
    }
    .desc {
      font-family: PingFangSC-Regular;
      font-size: dpi(2rem);
      color: #05204d;
      opacity: 0.8;
    }
    .info {
      display: flex;
      flex-direction: column;
      min-height: dpi(16rem);
      padding-top: dpi(5rem);
      padding-left: dpi(3rem);
      padding-bottom: dpi(4rem);
    }
    .contact {
      display: flex;
      flex-direction: column;
      padding: dpi(4rem) dpi(3rem);
      font-family: PingFangSC-Medium;
      font-size: dpi(2rem);
      line-height: dpi(3rem);
      color: #565656;
      .contact-text {
        &:not(&:last-child) {
          margin-bottom: dpi(2rem);
        }
        .icon {
          font-family: 'Material Symbols Outlined';
          font-size: dpi(2rem);
          color: #05204d;
          opacity: 0.5;
        }
      }
    }
    .operate {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      &-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: dpi(6rem);
        height: dpi(4rem);
        border: solid 1px #dddddd;
        font-family: 'Material Symbols Outlined';
        font-size: dpi(2rem);
        color: #0571b0;
        &:not(&:last-child) {
          border-right: none;
        }
        &:nth-child(2) {
          color: #ff0000;
        }
      }
    }
  }

  .report-in {
    width: dpi(70rem);
    margin-bottom: dpi(4rem);

    .info {
      background-color: #f2f8fb;
    }
  }
}
</style>
